<html>
    <head>
        <title>Restaurants Information Demo</title>
        
        <link rel="stylesheet" type="text/css" href="jquery.status.css" />
        
        <script src="socket.io.js" type="text/javascript"></script>
        <script src="sapfeed.js" type="text/javascript"></script>
        
        <script src="jquery.min.js" type="text/javascript"></script> 
        <script src="jquery.status.js" type="text/javascript"></script>        
        
        <script src="demo.js" type="text/javascript"></script>
        <style type="text/css">
            html, body, #map_canvas {
                margin: 0;
                padding: 0;
                height: 90%;
            }

            .info_div{
                overflow: hidden;

            }

            .green_bold{
                color: green;
                font-weight: bold;
            }

            .coral_bold{
                color: black;
                font-weight: bold;
            }

            .red_bold{
                color: red;
                font-weight: bold;
            }

            .red_title{
                color: red;
            }

            .time_special{
                font-size: 24px;
                color: red;
            }

            .info_content{
                width: 300px;
                height: 20px;
            }

        </style>
        <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    </head>
    <body>
        <h1 style="text-align: center">Restaurants Information Demo</h1>
        <div id="map_canvas"></div>

        
            
        <div id="status_panel">
            <div class="info message">
                <h3 id="info_head">FYI, something just happened!</h3>
                <p id="info_content">This is just an info notification message.</p>
            </div>
                    
            <div class="error message">
                <h3 id="error_head">Ups, an error ocurred</h3>
                <p id="error_content">This is just an error notification message.</p>
            </div>
                    
            <div class="warning message">
                <h3 id="warning_head">Wait, I must warn you!</h3>
                <p id="warning_content">This is just a warning notification message.</p>
            </div>
                    
            <div class="success message">
                <h3 id="success_head">Congrats, you did it!</h3>
                <p id="success_content">This is just a success notification message.</p>
            </div>      
        </div>
            
        <div id="action_panel" style="position: absolute; bottom: 10px;">
            <input type="button" id="stop_btn" value="Stop"/>
        </div>         
        
    </body>
</html>
